<template>
   <div
      :class="cn(
        'relative inline-flex h-5 items-center rounded-[5px] border border-divider-deep px-[5px] leading-3 text-text-tertiary',
        uppercase ? 'system-2xs-medium-uppercase' : 'system-xs-medium',
      )"
    >
      <div v-if="hasRedCornerMark" class='absolute right-[-2px] top-[-2px] h-1.5 w-1.5 rounded-[2px] border border-components-badge-status-light-error-border-inner bg-components-badge-status-light-error-bg shadow-sm'>
      </div>
      <slot name="text"></slot>
      <slot name="children"></slot>
    </div>
</template>
<script setup lang="ts" name="Badge">
import cn from '@/utils/classnames'

type BadgeProps = {
  uppercase?: boolean
  hasRedCornerMark?: boolean
}
defineProps<BadgeProps>();
</script>
